<template>
    <div id="dataMapecharts" ref="dataMapecharts"></div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import china from "./china.json";
import { onMounted, ref } from "vue";

// 类型断言
const _china = china as any

const dataMapecharts = ref()
const mYecharts = () => {
    echarts.registerMap("china", _china, {});
    //加载中国地图
    var myChart = echarts.init(
        dataMapecharts.value
    );
    // 绘制图表
    var chinaMap = {
        title: {
            //标题
            // text: "中国地图",
            left: "center",
        },
        zoom: 5,
        tooltip: {
            //鼠标移动到某个省份时显示内容
            show: true,
            formatter: function (item: any) {
                let resData = item.data;
                // console.log(item, resData);
                if (resData) {
                    return "省份:" + resData.name + "<br/>" + "数量:" + resData.value;
                }
            },
        },
        selectedMode: "single",
        geo: {
            // 设置地图的显示信息
            map: "china", // 注意  哪个区域的就显示哪个区域的名称
            label: {
                show: true,
                color: "#000",
                fontSize: 12,
            },
            roam: false,
            itemStyle: {
                borderColor: "#ccc",
                areaColor: "#e0f3f8",
            },
            // emphasis: {
            //     show: true,
            //     areaColor: "#9DD4F4",
            //     shadowColor: "rgba(0, 0, 0, 0.5)",
            // },
            //   left: "5%",
            //   right: "5%",
            //   top: "5%",
            //   bottom: "5%",
        },
        series: [
            {
                type: "map",
                geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
                data: [
                    { name: "北京", selected: false, value: 1 },
                    { name: "天津", selected: false, value: 2 },
                    { name: "上海", selected: false, value: 3 },
                    { name: "重庆", selected: false, value: 4 },
                    { name: "河北", selected: false, value: 5 },
                    { name: "河南", selected: false, value: 6 },
                    { name: "云南", selected: false, value: 7 },
                    { name: "辽宁", selected: false, value: 8 },
                    { name: "黑龙江", selected: false, value: 9 },
                    { name: "湖南", selected: false, value: 10 },
                    { name: "安徽", selected: false, value: 11 },
                    { name: "山东", selected: false, value: 12 },
                    { name: "新疆", selected: false, value: 13 },
                    { name: "江苏", selected: false, value: 14 },
                    { name: "浙江", selected: false, value: 15 },
                    { name: "江西", selected: false, value: 16 },
                    { name: "湖北", selected: false, value: 17 },
                    { name: "广西", selected: false, value: 18 },
                    { name: "甘肃", selected: false, value: 19 },
                    { name: "山西", selected: false, value: 20 },
                    { name: "内蒙古", selected: false, value: 21 },
                    { name: "陕西", selected: false, value: 22 },
                    { name: "吉林", selected: false, value: 23 },
                    { name: "福建", selected: false, value: 24 },
                    { name: "贵州", selected: false, value: 25 },
                    { name: "广东", selected: false, value: 26 },
                    { name: "青海", selected: false, value: 27 },
                    { name: "西藏", selected: false, value: 28 },
                    { name: "四川", selected: false, value: 29 },
                    { name: "宁夏", selected: false, value: 30 },
                    { name: "海南", selected: false, value: 31 },
                    { name: "台湾", selected: false, value: 32 },
                    { name: "香港", selected: false, value: 33 },
                    { name: "澳门", selected: false, value: 34 },
                ],
            },
        ],
        dataRange: {//给各个省份设置不同颜色
            x: "-1000 px", //图例横轴位置
            y: "-1000 px", //图例纵轴位置
            splitList: [
                {
                    start: 1,
                    end: 1,
                    label: "北京",
                    color: "#EC5D2A",
                },
                { start: 2, end: 2, label: "天津", color: "#635ED8" },
                { start: 3, end: 3, label: "上海", color: "#feffdb" },
                { start: 4, end: 4, label: "重庆", color: "#478AFF" },
                { start: 5, end: 5, label: "河北", color: "#478AFF" },
                { start: 6, end: 6, label: "河南", color: "#478AFF" },
                { start: 7, end: 7, label: "云南", color: "#635ED8" },
                { start: 8, end: 8, label: "辽宁", color: "#24CBFF" },
                { start: 9, end: 9, label: "黑龙江", color: "#478AFF" },
                { start: 10, end: 10, label: "湖南", color: "#635ED8" },
                { start: 11, end: 11, label: "安徽", color: "#478AFF" },
                { start: 12, end: 12, label: "山东", color: "#478AFF" },
                { start: 13, end: 13, label: "新疆", color: "#6A259A" },
                { start: 14, end: 14, label: "江苏", color: "#635ED8" },
                { start: 15, end: 15, label: "浙江", color: "#6A259A" },
                { start: 16, end: 16, label: "江西", color: "#478AFF" },
                { start: 17, end: 17, label: "湖北", color: "#6A259A" },
                { start: 18, end: 18, label: "广西", color: "#478AFF" },
                { start: 19, end: 19, label: "甘肃", color: "#6A259A" },
                { start: 20, end: 20, label: "山西", color: "#6A259A" },
                { start: 21, end: 21, label: "内蒙古", color: "#478AFF" },
                { start: 22, end: 22, label: "陕西", color: "#478AFF" },
                { start: 23, end: 23, label: "吉林", color: "#6A259A" },
                { start: 24, end: 24, label: "福建", color: "#6A259A" },
                { start: 25, end: 25, label: "贵州", color: "#635ED8" },
                { start: 26, end: 26, label: "广东", color: "#6A259A" },
                { start: 27, end: 27, label: "青海", color: "#478AFF" },
                { start: 28, end: 28, label: "西藏", color: "#6A259A" },
                { start: 29, end: 29, label: "四川", color: "#478AFF" },
                { start: 30, end: 30, label: "宁夏", color: "#635ED8" },
                { start: 31, end: 31, label: "海南", color: "#478AFF" },
                { start: 32, end: 32, label: "台湾", color: "#6A259A" },
                { start: 33, end: 33, label: "香港", color: "#dc9bbb" },
                { start: 34, end: 34, label: "澳门", color: "#e0f7cc" },
                { start: 34, end: 34, label: "澳门", color: "#e0f7cc" },
            ],
        }, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；名字与json对应，（start: 1,  end: 1）是data数组的key值
    };

    myChart.on("click", function (param: any) {
        //地图省份点击事件
        console.log(param, param.name);
    });
    myChart.setOption(chinaMap);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

}
onMounted(() => {
    mYecharts()
})

</script>
<style lang="scss" scoped>
#dataMapecharts {
    width: 100%;
    height: 400px;
}
</style>
